<template>
    <div class="catalog-title">{{ search_data.name }}</div>
    <div class="container">
        <div class="search-container">
            <el-input clearable="true" style="margin: 5px 0;" @keyup.enter="onInputEnter" class="my-input" v-model="search_key"
                placeholder="请输入关键字（回车 或 enter）进行搜索">
                <template #prepend>
                    <el-icon>
                        <Search />
                    </el-icon>
                </template>
                <!-- <template #append>
                </template> -->
            </el-input>
        </div>
        <div v-if="search_data.type == 2" class="result-container">
            <el-scrollbar height="600px" style="height: 88% !important;">
                <el-collapse v-model="activeNames">
                    <div v-for="(video, index) in result_data.videos">
                        <el-collapse-item class="video-node" :name="index">
                            <template #title>
                                <div class="video-collapse-item">{{ video.name }}</div>
                            </template>
                            <el-scrollbar :always="true">
                                <div class="scrollbar-flex-content">
                                    <div v-for="(pf, index) in video.kfs" class="scrollbar-demo-item">
                                        <div ref="innerRef" class="f-container">
                                            <el-image style="width: 100%;" class="f-image" :src="pf.img"
                                                :preview-src-list="getImgUrlList(video.kfs)" :initial-index="index"
                                                fit="cover" />
                                            <!-- <img :src="pf.img" style="width: 100%" /> -->

                                            <div class="f-operation">

                                                <div class="f-title">（第{{ index + 1 }}页）时间点：{{ pf.time }}</div>

                                                <div class="f-button-container">

                                                    <el-button :round="true" size="small"
                                                        @click="onFPlayer(pf.ms, video.id)" class="f-button">跳转

                                                    </el-button>

                                                </div>

                                            </div>

                                        </div>
                                    </div>
                                </div>
                            </el-scrollbar>
                        </el-collapse-item>
                    </div>

                </el-collapse>
            </el-scrollbar>
        </div>

        <div v-if="search_data.type == 3" class="result-container">
            <el-scrollbar height="550px" always :min-size="50">
                <el-collapse v-model="activeNames">
                    <div v-for="(chapter, c_index) in result_data.chapters">
                        <el-collapse-item :name="`${c_index}`">
                            <template #title>
                                <div class="chapter-collapse-item">{{ chapter.name }}</div>
                            </template>
                            <el-collapse v-model="activeNames" :key="c_index" >
                                <div v-for="(video, v_index) in chapter.videos">
                                    <el-collapse-item :name="`${c_index}${v_index}`">
                                        <template #title>
                                            <div class="video-collapse-item">{{ video.name }}</div>
                                        </template>
                                        <el-scrollbar always>
                                            <div class="scrollbar-flex-content">
                                                <div v-for="(pf, index) in video.kfs" class="scrollbar-demo-item">
                                                    <div ref="innerRef" class="f-container">
                                                        <el-image style="width: 100%;" class="f-image" :src="pf.img"
                                                            :preview-src-list="getImgUrlList(video.kfs)"
                                                            :initial-index="index" fit="cover" />
                                                        <!-- <img :src="pf.img" style="width: 100%" /> -->

                                                        <div class="f-operation">

                                                            <div class="f-title">（第{{ index + 1 }}页）时间点：{{ pf.time }}
                                                            </div>

                                                            <div class="f-button-container">

                                                                <el-button :round="true" size="small"
                                                                    @click="onFPlayer(pf.ms, video.id)"
                                                                    class="f-button">跳转

                                                                </el-button>

                                                            </div>

                                                        </div>

                                                    </div>
                                                </div>
                                            </div>
                                        </el-scrollbar>
                                    </el-collapse-item>
                                </div>

                            </el-collapse>
                        </el-collapse-item>
                    </div>
                </el-collapse>
            </el-scrollbar>
        </div>

    </div>
</template>

<script setup>
import { ElMessageBox } from 'element-plus';
import { onMounted, onUpdated, reactive, ref, watch } from 'vue-demi';
import { ResourceType } from '../libs/enum';
import { Chapter, Video, Course } from '../model/resource';
import store from '../store';
import { ShowTip } from '../utils/utils';
const props = defineProps(['old_data','data'])
const search_data = reactive({
    name: props.data.name,
    type: props.data.type,
    id: props.data.id
})

const result_data = ref([])
const search_key = ref()

const emtis = defineEmits()
const activeNames = ref(['0', '1'])
onMounted(async () => {

    // data.value = chapter_search_data
    // data.value = course_search_data
})

// const innerRef = ref()
// const scrollbarRef = ref()


function getImgUrlList(kfs) {
    let imgs = []
    kfs.map((pf, index) => imgs.push(pf.img))
    return imgs
}


async function onFPlayer(ms, video_id) {
    // 跳转到对应的视频界面
    ShowTip.showLoading('加载中....')
    emtis('close')
    let v = (await new Video().get(video_id))
    v.start_ms = ms
    store.commit('changeStage', {
        name: 'video-detail',
        new_data: v,
        old_data: props.old_data
    })
    ShowTip.hideLoading()
}


async function onInputEnter() {
    result_data.value = {}
    ShowTip.showLoading('正在努力搜索 . . .', true)
    if (search_key.value) {
        let result = null
        if (search_data.type == ResourceType.COURSE) {
            result = await new Course().search(search_data.id, search_key.value)
        } else if (search_data.type == ResourceType.CHAPTER) {
            result = await new Chapter().search(search_data.id, search_key.value)
        }
        if(!result.name){
            ShowTip.hideLoading()
            ShowTip.errorBox('搜索失败，请重试！')
            return
        }

        if (
            (result.videos && result.videos.length == 0) ||
            (result.chapters && result.chapters.length == 0)
        ) {
            ShowTip.hideLoading()
            ShowTip.warningBox(`没有搜索到与（关键词：${search_key.value}） 相关的内容`)
            return
        }
        result_data.value = result
        ShowTip.hideLoading()
        // console.log('搜索结果', result)
    } else {
        ShowTip.hideLoading()
        ElMessageBox.prompt('搜索内容不能为空', '提示', {
            showInput: false,
            showCancelButton: false,
            showConfirmButton: false,
            showClose: false
        })
    }
     
}

// 事件

onUpdated(() => {
    // ELTree有关的操作
    // treeRef.value.setCurrentKey(props.name)// 设置选中的节点
})
</script>


<style>
.el-collapse-item__content {
    padding: 0 !important;
}

.el-drawer__header {
    color: #53514b !important;
    margin: 0;
}
</style>

<style lang="scss" scoped>
.container {
    width: 100%;
    display: flex !important;
    flex-direction: column !important;
}

.search-container {}


.result-container {
    height: 630px;
    display: flex;
    flex-direction: column;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 0 0 15% 15%;
    background-color: #ffffff8f;
}

.result-container .el-collapse-item {
    padding: 0 !important;
}

.chapter-collapse-item {
    background-color: #f0fff8 !important;
    color: #42716b;
    width: 100%;
    text-align: start;
    font-weight: 500 !important;
    font-size: 16px !important;
    padding-left: 30px;
}



.video-collapse-item {
    background-color: #fbfff3 !important;
    width: 100%;
    text-align: start;
    padding-left: 40px !important;
    font-size: 14px;
    color: #86ac6d;
}

// 鼠标覆盖
.el-tree-node__content:hover {
    color: #e56363;
    font-size: 50px !important;
}

// 高亮
.el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content {
    color: #880dd9 !important;
}

.catalog-title {
    font-size: 20px;
    margin: 0 0 0 2px;
}

.el-input-key {
    width: 350px;
    margin: 5px;
    background: #d0eabc !important;
}

// ===========================
.scrollbar-flex-content {
    display: flex;
}

.scrollbar-demo-item {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 300px;
    height: 200px;
    margin: 10px;
    text-align: center;
    border-radius: 4px;
    background: var(--el-color-danger-light-9);
    color: var(--el-color-danger);
}


//v=================
.f-container {
    width: 300px !important;
    margin-top: 0px 5px;
    height: fit-content;
    border-bottom: 2.2px #75a1a1 solid;
    border-radius: 1%;


    // ==============


}

.f-operation {
    margin: 0 2px;
    padding: 3px 0;
    display: flex !important;
    flex-direction: row;
    width: 100% !important;
    justify-content: center;
    align-items: center;
    margin-bottom: 5px;
    background: #f7e5e5;
    border-bottom-left-radius: 3%;
    border-bottom-right-radius: 3%;
}

.f-title {
    height: 50rpx;
    line-height: 50prx;
    text-align: center;
    flex: 7;
}

.f-button-container {
    margin: 0;
    flex: 3;
    align-self: center;
    color: #ffffff;
}


.f-button {}
</style>
